<template>
  <div class="container">
    <!-- 工作经验，专业，婚姻状态 -->
    <div class="title">简历信息填写</div>
    <ul>

      <li>
        <span>学校名称<span class="font_red_light">*</span></span>
        <input type="text" name="name" placeholder="请输入学校名称" v-model="school">
      </li>
      <li>
        <span>专业名称<span class="font_red_light">*</span></span>
        <input type="text" name="name" placeholder="请输入专业名称" v-model="major">
      </li>
      <li>
        <span>学历<span class="font_red_light">*</span></span>
          <input @click="showPicker(education,'educationInput')" type="text" name="name" placeholder="选择学历" v-model="educationInput" readonly>
          <span @click="showPicker(education,'educationInput')">></span>
          <popup-picker :col="col" ref="minePopup" :models="models" @getSelectValue="getSelectValue"></popup-picker>
      </li>
       <li>
        <span>开始时间<span class="font_red_light">*</span></span>
          <input @click="showStartPicker" type="text" name="name" placeholder="选择开始时间" v-model="startInput" readonly>
          <span @click="showStartPicker">></span>
          <popupTimePicker  @getSelectValue="getstartTime" ref="timer"></popupTimePicker>
      </li> 
      <li>
        <span>结束时间<span class="font_red_light">*</span></span>
          <input @click="showEndPicker" type="text" name="name" placeholder="选择结束时间" v-model="endInput" readonly>
          <span @click="showEndPicker">></span>
          <popupTimePicker  @getSelectValue="getendTime" ref="timer1"></popupTimePicker>
      </li>
      <div class="commit" @click="commit">
        <div>保存</div>
      </div>
    </ul>
  </div>
</template>

<script>
import { Toast } from 'vant';
import popupPicker from '@/components/popupPicker';
import popupTimePicker from '@/components/popupTimePicker';
export default {
  data () {
    return {  
      col:[],
      models:[],
      school:'',
      educationInput:"",
      startInput:"",
      endInput:"", 
      major:'', 
      education:['小学','初中','高中','本科','研究生','硕士','博士'], 
      id:'',
      itemData:''//传进来的修改项的初始数据

    }
  },

  methods: {
    getSelectValue(val,model){
      this[model]=val
    },
    showPicker(col,mod){
      this.$refs.minePopup.$data.showArea=true;
      this.col=col;
      this.models=mod
    },
    showStartPicker(){
      this.$refs.timer.$data.showArea=true;
    },
    showEndPicker(){
      this.$refs.timer1.$data.showArea=true;
    },
    getstartTime(e,date){
      this.startInput=date
    },
    getendTime(e,date){
      this.endInput=date
    },
    async commit(){
      if(this.school==''){
         Toast ('学校名称不能为空')
         return
      }else if(this.major==''){
        Toast ('专业名称不能为空')
         return
      }else if(this.educationInput==''){
        Toast ('学历不能为空')
         return
      }else if(this.startInput==''){
        Toast ('开始时间不能为空')
         return
      }else if(this.endInput==''){
        Toast ('结束时间不能为空')
         return
      }
      // var userToken=wx.getStorageSync('userToken') 
      let res=await this.$axios.post('/resume/addResume',{
        type:'education_experience',
        type_id:this.id,
        school_name:this.school,
        professional_name:this.major,
        education_name:this.educationInput,
        education_start_time:this.startInput,
        education_end_time:this.endInput
        })
      if(res.data.level=='success'){
        this.$currency.showToast('填写成功',1500,'success')
        setTimeout(()=>{
          this.$router.go(-1)
        },1500)
      }else{
        Toast(res.data.message)
      }
    }
    
  },
  components:{
    popupPicker,
    popupTimePicker
  },
  mounted(){

  },
  activated(){
    if(this.$route.query.item){
      //传进来的修改项
      this.itemData=JSON.parse(this.$route.query.item)
      this.id=this.itemData.id
      this.school=this.itemData.name
      this.major=this.itemData.professional_name
      this.educationInput=this.itemData.education
      this.startInput=this.itemData.start_time.split(' ')[0]
      this.endInput=this.itemData.end_time.split(' ')[0]
    }

  }
}
</script>

<style scoped>
.title{width: 100%;height: 51px;line-height: 51px;text-align: center;font-size: 22px;color: #000000;background-color: #fff;margin-bottom: 5px;}
.container{padding-bottom:89px;background-color: #F8F8FB}
.container ul{width: 100%;}
.container ul li{width: 100%;display: flex;justify-content: row;padding: 15px 0px;background-color: #fff;margin-bottom: 2px;}
.container ul li span:nth-of-type(1){width: 100px;font-size: 17px;color: #000000;padding-left: 25px;}
.container ul li input{width: 223px;border: 0px;font-size: 15px;color: #B2B2B9;}
.container ul li span:nth-of-type(2){margin-right: 10px;font-size: 20px;color:#B2B2B9;}
.commit{position: fixed;bottom: 0px; left: 0px;width: 100%;height: 73px;background-color: #F8F8FB;z-index: 99}
.commit div{width: 345px;height: 48px;text-align: center;line-height: 48px;background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);border-radius: 8px;margin: 12.5px auto;color: #FFFFFF;}
picker,.picker{width: 100%;height: 100%;display: flex;justify-content: row;}
.addImg{width: 51px;height: 51px;}

.picker_inner{position: relative;display: flex;height: auto;}
.picker_inner:after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  z-index:999;
}
.arrow{margin-right: 10px;font-size: 20px;color:#B2B2B9;float:right;width:auto!important}

.font_red_light{color:red !important;padding-left:5px !important;}
</style>
